<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title>我的物品</title>
</head>
<body>
    <div layout:fragment="content" class="fade-in">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3><i class="fas fa-list me-2"></i>我的物品</h3>
            <a href="/items/new" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>发布新信息
            </a>
        </div>

        <div th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
            <span th:text="${successMessage}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        <div th:if="${errorMessage}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <span th:text="${errorMessage}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        <!-- 物品列表 -->
        <div class="row row-cols-1 row-cols-md-3 g-4" th:if="${not #lists.isEmpty(items)}">
            <div class="col" th:each="item : ${items}">
                <div class="card h-100">
                    <!-- 状态标签 -->
                    <div class="position-absolute top-0 end-0 p-2">
                        <span class="badge" th:classappend="${item.status == T(meiyunting.shiwuzhaoling.model.ItemStatus).LOST ? 'bg-danger' : 'bg-success'}"
                              th:text="${item.status != null ? item.status.displayName : '未知'}"></span>
                    </div>
                    
                    <!-- 图片容器 -->
                    <div class="card-img-container overflow-hidden">
                        <img th:if="${item.imagePath != null}" th:src="${item.imagePath}" class="card-img-top item-image" alt="物品图片">
                        <img th:if="${item.imagePath == null}" src="/static/images/no-image.svg" class="card-img-top item-image" alt="无图片">
                    </div>
                    
                    <div class="card-body">
                        <h5 class="card-title" th:text="${item.title}">标题</h5>
                        <p class="card-text text-muted">
                            <small>
                                <i class="fas fa-tag me-1"></i>
                                <span th:text="${item.type.displayName}">类型</span>
                            </small>
                        </p>
                        <p class="card-text" th:text="${item.description}">描述</p>
                    </div>
                    
                    <div class="card-footer bg-transparent">
                        <div class="d-flex justify-content-between align-items-center">
                            <small class="text-muted">
                                <i class="fas fa-clock me-1"></i>
                                <span th:text="${#temporals.format(item.createdAt, 'yyyy-MM-dd HH:mm')}">发布时间</span>
                            </small>
                            <div class="btn-group">
                                <a th:href="@{/items/{id}(id=${item.id})}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-eye me-1"></i>查看
                                </a>
                                <a th:href="@{/items/{id}/edit(id=${item.id})}" class="btn btn-sm btn-outline-secondary">
                                    <i class="fas fa-edit me-1"></i>编辑
                                </a>
                                <form th:action="@{/items/{id}/delete(id=${item.id})}" method="post" class="d-inline"
                                      onsubmit="return confirm('确定要删除这条信息吗？');">
                                    <button type="submit" class="btn btn-sm btn-outline-danger">
                                        <i class="fas fa-trash-alt me-1"></i>删除
                                    </button>
                                </form>
                            </div>
                        </div>
                        
                        <!-- 认领状态 -->
                        <div th:if="${item.claimedBy != null}" class="mt-2 text-success">
                            <i class="fas fa-check-circle me-1"></i>
                            已被认领 - <span th:text="${#temporals.format(item.claimedAt, 'yyyy-MM-dd HH:mm')}">认领时间</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 无数据提示 -->
        <div th:if="${#lists.isEmpty(items)}" class="text-center py-5">
            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
            <p class="text-muted">您还没有发布任何物品信息</p>
            <a href="/items/new" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>立即发布
            </a>
        </div>
    </div>
</body>
</html> 